<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="/js/echarts.js"></script>
    <script src="/js/jquery-2.1.0.min.js" charset="utf-8"></script>
    <script src="/layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
</head>
<body>
<div class="layui-tab" lay-filter="demo">
    <ul class="layui-tab-title">
        <li class="layui-this">按日查询</li>
        <li>按月查询</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-card-body ">
                <form class="layui-form layui-col-space5" >
                    <div class="layui-inline layui-show-xs-block">
                        <input class="layui-input"  autocomplete="off" placeholder="查询日" name="startDate" id="startDate">
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </form>
            </div>
            <div id="day" style="width:1200px;height:400px;"></div>
        </div>
        <div class="layui-tab-item">
            <div class="layui-card-body ">
                <form class="layui-form layui-col-space5" >
                    <div class="layui-inline layui-show-xs-block">
                        <input class="layui-input"  autocomplete="off" placeholder="查询月" name="startmoDate" id="startmoDate">
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn"  lay-submit lay-filter="sreachmo"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </form>
            </div>
            <div id="month" style="width:1180px;height:400px;" ></div>
        </div>
    </div>
</div>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
        element.on('tab(demo)', function(data) {
            console.log(data.index); //得到当前Tab的所在下标
        });
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('day'));
    var form = layui.form;

    // 指定图表的配置项和数据
    myChart.setOption({
        title: {
            text: '房型销量图:'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    });

    layui.use('form', function() {
        form.on('submit(sreach)', function(data){
            $.get('/admin-list-booktest',data.field,function (data) {
                refreshData(data)
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })

    function refreshData(data){
        if(!myChart){
            return;
        }
        //更新数据
        var option = myChart.getOption();
        option.series[0].data = data.summ;
        myChart.setOption(option);
    }

    $.ajax({
        url:'/admin-list-booktest',
        async:false,
        cache:false,
        success:function (data) {
            console.log(data)
            myChart.setOption({
                xAxis:{data:data.roomname},
                series:[{name:'销量',data:data.summ}],
            });
        },
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('month'));
    // 指定图表的配置项和数据
    myChart1.setOption({
        title: {
            text: '房型销量图:'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    });

    layui.use('form', function() {
        form.on('submit(sreachmo)', function(data1){
            console.log(data1)
            $.get('/admin-list-bookmonth',data1.field,function (data1) {
                console.log(data1)
                refreshData1(data1)
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })

    function refreshData1(data1){
        if(!myChart1){
            return;
        }
        //更新数据
        var option = myChart1.getOption();
        option.series[0].data = data1.summ;
        option.xAxis[0].data=data1.roomname;
        myChart1.setOption(option);
    }
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        var startDate=laydate.render({
            elem: '#startDate',
            value:new Date(),
        });
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        var startmoDate=laydate.render({
            elem: '#startmoDate',
            value:new Date(),
            type:'month'
        });
    });
</script>
</body>
</html>